<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">商户门头/logo:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">联系电话:</span>
					</template>
					<u-input v-model="model1.userInfo.phone" border="none" placeholder="请输入电话"></u-input>
				</u-form-item>

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">验证码:</span>
					</template>
					<u-input v-model="leasingManager.code" border="none" placeholder="请输入验证码"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode" size="mine">{{tips}}</u-button>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">上传营业执照（只能上传jpg/png）:</span>
					</template>


				</u-form-item>
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="250" height="150">
					<image
						src="https://ts3.cn.mm.bing.net/th?id=OIP-C.cvnF4SLcwVuUXP6t32U_9gHaFJ&w=299&h=208&c=8&rs=1&qlt=90&o=6&cb=13&pid=3.1&rm=2"
						mode="widthFix" style="width: 250px;height: 150px;"></image>
				</u-upload>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">社会统一信用代码:</span>
					</template>

					<u--input v-model="model1.userInfo.socialCode" border="none" placeholder="请输入社会统一信用代码"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">商户名称:</span>
					</template>

					<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入商户名称"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">商户简称:</span>
					</template>

					<u--input v-model="model1.userInfo.abbreviation" border="none" placeholder="请输入商户简称"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">详细地址:</span>
					</template>

					<u--input v-model="model1.userInfo.address" border="none" placeholder="请输入详细地址"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">营业时间:</span>
					</template>

					<u--input v-model="model1.userInfo.time" border="none" placeholder="请输入营业时间"></u--input>
				</u-form-item>

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">公司介绍:</span>
					</template>
				</u-form-item>
				<uni-forms-item borderBottom>
					<u--textarea v-model="value1" placeholder="请输入商户简介内容" height="80" maxlength="150" count="true"
						border="bottom"></u--textarea>
				</uni-forms-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">上传身份证:</span>
					</template>

				</u-form-item>
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="250" height="150">

					<div class="identityCard" style="">
						<view class="image1" style="margin:0  20rpx ;">
							<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
								style="width: 150px; height: 200px; border-radius: 10px;" />
							<view class="" style="text-align: center;">
								身份证正面
							</view>
						</view> <!-- 第一个图像 -->
						<view class="image1" style="margin:0  20rpx ;">
							<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
								style="width: 150px; height: 200px; border-radius: 10px;" />
							<view class="" style="text-align: center;">
								身份证反面
							</view>
						</view>

					</div>

				</u-upload>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">法人姓名:</span>
					</template>
					<u-input v-model="model1.userInfo.legalEntityName" border="none" placeholder="请输入法人姓名"></u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">法人身份证号码:</span>
					</template>
					<u-input v-model="model1.userInfo.identityCardNumber" border="none"
						placeholder="请输入身份证号码"></u-input>
				</u-form-item>
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">拍卖许可证:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</u-form-item>

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">拍卖师从业资格证:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</u-form-item>
















				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">收款人:</span>
					</template>
					<u-input v-model="model1.userInfo.collection" border="none" placeholder="请输入收款人"></u-input>

				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">开户银行:</span>
					</template>
					<u-input v-model="model1.userInfo.bank" border="none" placeholder="请输入开户银行"></u-input>

				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">银行卡号:</span>
					</template>
					<u-input v-model="model1.userInfo.bankNumber" border="none" placeholder="请输入银行卡号"></u-input>

				</u-form-item>
				<u-form-item borderBottom @click="show=true">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">招商经理:</span>
					</template>
					<u-input v-model="model1.userInfo.investmentManager" disabled placeholder="请选择代理类型"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">入驻费:</span>
					</template>
					<u-input v-model="model1.userInfo.price" border="none" placeholder="">元</u-input>
				</u-form-item>

			</u--form>

		</view>
		<u-picker :show="show" :columns="collectionLists" @close="close" @confirm="confirm"></u-picker>

		<u-popup :show="show2" round="10" mode="center" @close="close" @open="open">
			<view style="margin: 20rpx;">
				<view class="title1" style="text-align: center;">
					区域经理入驻合同
				</view>
				<text>欢迎您使用“周壹淘拍卖商城”小程序及服务! 欢迎使用赤峰周一文化传媒有限公司(以下简称“赤峰周一文化传媒”)“周壹淘拍卖商城”小程序(以下简称“本小程序”) 及服务在此特别提醒您(用户)
					在注册成为用户之前，请认真阅读本《区域代理入驻协议》(以下简称“协议”)，确保您充分理解本协议中各条款请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。区域代理包括；古玩城推广，古玩地摊推广，展会组织者推广，微信群主推广，有独立推广二维码，区域代理下推广二维码入住的商户都有提成500平台盈利2%的利润

					周壹淘平台招商政策: 为了能帮助到您的古玩城+古玩商户+每件艺术品，推向互联网全球展示！
					整合艺术品资源！让每位从事经营古玩艺术品的人！能够公平展示交流交易使用（周壹淘）线上线下一体化这款工具！实现艺术品的数字化转型升级！艺术品繁荣昌盛在此推向高潮！
					每个商户入住费1580元，古玩城管理者500元，平台交易平台服务费为10%再给古玩城管理者2%！联系全国某个古玩城）:
					成功入住70%以上茶水1万元！70%以下入住按每户80元计算！一次性交1580元，在平台交易超过10万元，返给商户1580元，交易20万元，在奖励2000元，（以此类推交易30万元平台奖励3000元）……
					全国古玩地摊市场入住: 联系全国某个地摊市场按每户成功入住80元计算） 每户入住费用580元市场管理者每户按100茶水费已备好平台交易平台服务费10%在给市场管理者2%这样市场管理者持续收益！
					每户在平台交易超过10万元，返给商户580元，交易20万元，在奖励2000元， （以此类推交易30万元平台奖励3000元）……</text>
			</view>
		</u-popup>
		<view class="container">

			<view class="item">
				<u-checkbox v-model="isAgreed"></u-checkbox>
				<view>
					我已阅读
					<text class="text1" @click="show2=true">《区域经理入驻协议》</text>，
					并已签署
					<text class="text1" @click="hetong">《区域经理入驻合同》</text>
				</view>
			</view>
			<view class="custom-button" @tap="submit">提交</view>


		</view>


	</view>






</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: '',
				value2: '',
				tips: '获取验证码',
				show: false,
				paramName: '',
				paramContent: '', // 用于存储输入的参数名

				selectedLabel: '',
				//规格属性
				count: '',
				price: '',
				color: '',
				fileList2: [],
				checkboxValue1: [],


				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				showFree: false,
				fileList1: [],
				collectionLists: [
					['无', '周海军', '网民']
				],
				model1: {
					userInfo: {
						name: '',
						phone: '',
						time: '',
						free: '',

						code: '',
						socialCode: '',
						abbreviation: '', //简称
						address: '',
						legalEntityName: '', //法人姓名
						identityCardNumber: '',
						collection: '',
						bank: '',
						bankNumber: '',
						price: '5000元',
						investmentManager: '' //招商经理,
					},
				},

				rules: {
					'userInfo.socialCode': {
						type: 'string',
						required: true,
						message: '社会统一信用代码',
						trigger: ['blur', 'change']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写商户名称',
						trigger: ['blur', 'change']
					},
					'userInfo.legalEntityName': {
						type: 'string',
						required: true,
						message: '请填写法人姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.identityCardNumber': {
						type: 'string',
						required: true,
						message: '请填写法人身份证',
						trigger: ['blur', 'change']
					},
					bank: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '开户银行是必填项'
					},
					bankNumber: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '银行卡号是必填项'
					},
					collection: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '收款人是必填项'
					},

					'userInfo.abbreviation': {
						type: 'string',
						required: true,
						message: '请填写商户简称',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.time': {
						type: 'string',
						required: true,
						message: '请填写营业时间',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': {
						type: 'string',
						required: true,
						message: '请填写联系电话',
						trigger: ['blur', 'change']
					},
					'userInfo.firm': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'userInfo.free': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择是否包邮',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		onLoad(options) {
			// 获取传递过来的标题
			const title = decodeURIComponent(options.title);
			console.log('jsjsj', title)

			// 设置 B 页面的标题
			wx.setNavigationBarTitle({
				title: title + ' 入驻'
			});


		},
		methods: {
			//上传身份证
			afterRead(file) {
				this.fileList6.push(file);
				// 处理上传逻辑
			},
			deletePic(index) {
				this.fileList6.splice(index, 1);
			},

			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			//获取验证码
			getCode() {
				// 获取验证码的逻辑
				console.log('获取验证码');
			},
			end() {
				// 结束倒计时的逻辑
				console.log('倒计时结束');
			},
			start() {
				// 开始倒计时的逻辑
				console.log('倒计时开始');
			},
			codeChange() {
				// 处理验证码变化的逻辑
				console.log('验证码变化');
			},
			//选择招商经理
			close() {
				this.show = false; // 关闭选择器
			},
			confirm(selectedItems) {

				this.model1.userInfo.investmentManager = selectedItems.value; // 更新输入框的值为选中的商品类目

				this.show = false; // 关闭选择器
			},
		}
	}
</script>

<style scoped lang="scss">
	// @import 'settledTable.scss';

	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}

	.custom-button {
		background-color: #d1a969;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;

		border-radius: 40rpx;
		margin: 20rpx;
	}

	.popup-content .item1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.popup-content .title {
		margin-top: 20rpx;
		text-align: center;
	}

	.popup-content .button-group {
		display: flex;
		margin-top: 30rpx;
	}

	.popup-content .button-group .item {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		border-radius: 40rpx;
		background-color: $base;
		margin: 0 40rpx;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.container {
		margin-top: auto;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text1 {
		color: #d1a969;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.image1 {}

	.container .custom-button {
		width: 96%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #d1a969;
		/* 设置按钮的背景颜色 */
		color: #fff;
		border-radius: 50rpx;
	}
</style>